---
id: menu
title: Menu
description: A list of options that appears when a user interacts with a button.
---

<ComponentPreview id="Menu" />

## Anatomy

To set up the menu correctly, you'll need to understand its anatomy and how we name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.

<Anatomy id="menu" />

## Examples

Learn how to use the `Menu` component in your project. Let's take a look at the most basic example:

<Example id="basic" />

### Listening to item selection

Pass the `onSelect` prop to the Menu component to perform some custom logic when an item is selected. The callback is
invoked with the `id` of the item.

<Example id="controlled" />

### Grouping menu items

When the number of menu items gets much, it might be useful to group related menu items. To achieve this, render the
`Menu.ItemGroup` component around the `Menu.Item` components. The `Menu.ItemGroupLabel` component can be used to add a
label to the group.

<Example id="group" />

### Separating menu items

To separate menu items, render the `Menu.Separator` component.

<Example id="separator" />

### Menu with links

To render menu items as links, use the `asChild` prop to replace the default element with an anchor tag.

<Example id="links" />

### Context menu

To show the menu when a trigger element is right-clicked, use the `Menu.ContextTrigger` component.

Context menus are also opened during a long-press of roughly `700ms` when the pointer is pen or touch.

<Example id="context" />

### Nested menu

To show a nested menu, render another `Menu` component and use the `Menu.TriggerItem` component to open the submenu.

<Example id="nested" />

### Checkbox

To add a checkbox to a menu item, use the `Menu.Checkbox` component.

<Example id="checkbox" />

### Radio Group

To group radio option items, use the `Menu.RadioGroup` component.

<Example id="radio-group" />

### Using the Root Provider

The `RootProvider` component provides a context for the menu. It accepts the value of the `useMenu` hook. You can
leverage it to access the component state and methods from outside the menu.

<Example id="root-provider" />

> If you're using the `RootProvider` component, you don't need to use the `Root` component.

## Guides

### Avoid passing custom ids to menu items

Ark UI autogenerates ids for menu items internally. Passing a custom `id` prop breaks the internal `getElementById`
functionality used by the component.

```tsx
// ❌ Don't do this
<Menu.Item id="custom-id" value="custom-value">
  Custom Item
</Menu.Item>

// ✅ Do this
<Menu.Item value="custom-value">
  Custom Item
</Menu.Item>
```

### Menu items as links

To render a menu item as a link, render the link as the menu item itself using the `asChild` prop, not as a child of the
menu item.

> This pattern ensures the link element receives the correct ARIA attributes and keyboard interactions from the menu
> item.

Here's an example of a reusable `MenuItemLink` component:

```tsx
interface MenuItemLinkProps extends Menu.ItemProps {
  href?: string
  target?: string
}

export const MenuItemLink = (props: MenuItemLinkProps) => {
  const { href, target, children, ...rest } = props
  return (
    <Menu.Item {...rest} asChild>
      <a href={href} target={target}>
        {children}
      </a>
    </Menu.Item>
  )
}
```

## API Reference

### Props

<ComponentTypes id="menu" />

### Context

These are the properties available when using `Menu.Context`, `useMenuContext` hook or `useMenu` hook.

<ContextType id="menu" />

## Accessibility

Complies with the [Menu WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/).

### Keyboard Support

<KeyBindingsTable id="menu" />
